<script setup lang="ts">
// // 导入threejs
// import * as THREE from "three";
// // 导入轨道控制器
// import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// // 导入lil.gui
// import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
// // 导入hdr加载器
// import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
// // 导入gltf加载器
// import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// // 导入draco解码器
// import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
// import { TransformControls } from "three/addons/controls/TransformControls.js";
// import modol from './components/modol.vue'

import axios from '~/axios'



import fullScreen from '../../components/fullScreen.vue'
// import ThreePlus from "./index";
// import * as THREE from "three";
import { getStorage, setStorage, clearStorage, removeStorage } from '~/composables/storage'

const userStore = useUserStore()
const appStore = useAppStore()

const router = useRouter()



const form = reactive({
  userName: '',
  passWord: '',
  isLine: false,
  isPassWord: false,
  wifiIP: ''
})


const initPage = () => {
  let T = getStorage('form')
  console.log(T)
  if (T) {
    Object.keys(form).forEach(v => form[v] = T[v])
  }
}
initPage()


const eyeType = ref(false)

const changeIsL = (e) => {
  console.log(e, 'e------------------------')
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Huawei|Honor|EMUI|HarmonyOS|MicroMessenger|Windows Phone|Mobile|SymbianOS|Nokia|UCWEB|Opera Mobi|Maemo|webOS|webOS|BlackBerry|Tablet|Mobile Safari/i.test(navigator.userAgent)

  let wifiIPUrl = `http://${form.wifiIP}:30800`


  const MobileURL = form.wifiIP && isMobile ? wifiIPUrl : import.meta.env.VITE_APP_BASELOCALITY_API

  const apiURL = e ? MobileURL : import.meta.env.VITE_APP_BASE_API
  axios.defaults.baseURL = apiURL


  setStorage('isLine', e)
  form.isLine = e
  if (form.isPassWord) {
    setStorage('form', form)
  }
}
const changeIsPW = (e) => {
  form.isPassWord = e

  if (e) {
    setStorage('form', form)
  } else {
    // clearStorage()
    removeStorage('form')
  }
}

const ruse1 = ref(false)
const ruse2 = ref(false)

const tapLogin = () => {
  if (form.userName == '') {
    return ruse1.value = true
  }
  if (form.passWord == '') {
    return ruse2.value = true
  }


  if (form.isPassWord) {
    setStorage('form', form)
  } else {
    removeStorage('form')
  }

  setStorage('isLine', form.isLine)
  setStorage('wifiIP', form.wifiIP)

  // return router.push('/dataManagement')

  let Q = {
    account: form.userName,
    password: form.passWord,
  }
  adminLogin(Q).then(res => {

    userStore.token = res.result.token
    userStore.userInfo = res.result

    // 判断是否为移动端
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Huawei|Honor|EMUI|HarmonyOS|MicroMessenger|Windows Phone|Mobile|SymbianOS|Nokia|UCWEB|Opera Mobi|Maemo|webOS|webOS|BlackBerry|Tablet|Mobile Safari/i.test(navigator.userAgent)
    let url
    if (isMobile) {
      url = '/dataManagement'
    } else {
      url = res.result.auth == 1 ? '/dataManagement' : '/alarmApparatus'
    }

    setTimeout(() => {
      router.push(url)
    }, 300)
  })

}



const changeInput1 = (e) => {
  if (e) {
    ruse1.value = false
  }
}
const changeInput2 = (e) => {
  if (e) {
    ruse2.value = false
  }
}
const changeInput3 = (e) => {
  console.log(form.isLine, 'form.isLine------------------------')
  setStorage('wifiIP', form.wifiIP)
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Huawei|Honor|EMUI|HarmonyOS|MicroMessenger|Windows Phone|Mobile|SymbianOS|Nokia|UCWEB|Opera Mobi|Maemo|webOS|webOS|BlackBerry|Tablet|Mobile Safari/i.test(navigator.userAgent)
  let wifiIPUrl = `http://${form.wifiIP}:30800`

  const MobileURL = form.wifiIP && isMobile ? wifiIPUrl : import.meta.env.VITE_APP_BASELOCALITY_API

  const apiURL = form.isLine ? MobileURL : import.meta.env.VITE_APP_BASE_API
  console.log(MobileURL, 'MobileURL------------------------')
  console.log(apiURL, 'apiURL------------------------')

  axios.defaults.baseURL = apiURL
}



// 监听回车事件
function onKeyUp(e) {
  if (e.key == "Enter") tapLogin()
}

// 添加键盘监听
onMounted(() => {
  document.addEventListener("keyup", onKeyUp)
})
// 移除键盘监听
onBeforeUnmount(() => {
  document.removeEventListener("keyup", onKeyUp)
})
// three
const threePlus = ref(null)
const canvas = ref(null)


const isLineStore = getStorage('isLine')
form.isLine = !!isLineStore


// onMounted(() => {


// threePlus.value = new ThreePlus(".canvas_box");
// canvas.value = threePlus.value.renderer.domElement

// // // 实例化加载器gltf
// const gltfLoader = new GLTFLoader();
// // 加载模型
// gltfLoader.load(
//   // 模型路径
//   "./model/ImageToStl.glb",
//   // 加载完成回调
//   (gltf) => {
//     gltf.scene.rotation.x = Math.PI / 4;
//     gltf.scene.rotation.y = Math.PI / 2;
//     threePlus.value.scene.add(gltf.scene);
//   }
// );

// THREE.DefaultLoadingManager.onProgress = function (item, loaded, total) {
//   console.log("进度:", new Number((loaded / total) * 100).toFixed(2));
//   if (new Number((loaded / total) * 100).toFixed(2) == 100) {
//     LoadingProgress.value = false
//   }
// };

// 监听窗口变化
// window.addEventListener("resize", () => {
//   // 重置渲染器宽高比

//   threePlus.value.renderer.setSize(window.innerWidth * 0.677, window.innerHeight);
//   // 重置相机宽高比
//   threePlus.value.camera.aspect = window.innerWidth / window.innerHeight;
//   // 更新相机投影矩阵
//   threePlus.value.camera.updateProjectionMatrix();
// });

// })


// // 创建场景
// const scene = new THREE.Scene();

// // 创建相机
// const camera = new THREE.PerspectiveCamera(
//   45, // 视角
//   window.innerWidth / window.innerHeight, // 宽高比
//   0.1, // 近平面
//   100000 // 远平面
// );

// // 创建渲染器
// const renderer = new THREE.WebGLRenderer({
//   logarithmicDepthBuffer: true,  // 抗闪烁，如果无效，就调整模型高度吧
//   antialias: true, // 开启模型渲染抗锯齿，可关
//   alpha: true // 背景透明
// });

// renderer.setSize((window.innerWidth * 0.677), window.innerHeight);

// renderer.setClearAlpha(0.1); // 设置背景透明度为0.5
// document.body.appendChild(renderer.domElement);

// // 设置相机位置
// camera.position.z = 200;
// camera.position.y = 2;
// camera.position.x = 2;
// camera.lookAt(0, 0, 0);

// // 添加世界坐标辅助器
// const axesHelper = new THREE.AxesHelper(1);
// scene.add(axesHelper);

// // 添加轨道控制器
// const controls = new OrbitControls(camera, renderer.domElement);


// // 设置带阻尼的惯性
// controls.enableDamping = true;
// // 设置阻尼系数
// controls.dampingFactor = 0.05;



// // 渲染函数
// function animate() {
//   controls.update();
//   requestAnimationFrame(animate);
//   // 渲染
//   renderer.render(scene, camera);
// }
// animate();

// // 监听窗口变化
// window.addEventListener("resize", () => {
//   // 重置渲染器宽高比

//   renderer.setSize(window.innerWidth * 0.677, window.innerHeight);
//   // 重置相机宽高比
//   camera.aspect = window.innerWidth / window.innerHeight;
//   // 更新相机投影矩阵
//   camera.updateProjectionMatrix();
// });

// let params = {};



// // 实例化加载器gltf
// const gltfLoader = new GLTFLoader();
// // 加载模型
// gltfLoader.load(
//   // 模型路径
//   "./model/ImageToStl.glb",
//   // 加载完成回调
//   (gltf) => {
//     gltf.scene.rotation.x = Math.PI / 4;
//     gltf.scene.rotation.y = Math.PI / 2;
//     scene.add(gltf.scene);
//   }
// );

// // 加载环境贴图
// let rgbeLoader = new RGBELoader();
// rgbeLoader.load("./texture/ -Nature_Lab_Bones_2k.hdr", (envMap) => {
//   envMap.mapping = THREE.EquirectangularReflectionMapping;
//   // 设置环境贴图
//   scene.environment = envMap;

//   scene.background = new THREE.Color(0x00ab63);
// });



</script>

<template>
  <!-- <modol class=""></modol> -->
  <!-- style="pointer-events: none;" -->
  <!-- <div class="fixed right-[32%] top-0 bottom-0 left-0 z-50 canvas_box " style="pointer-events: none;">
    <modol></modol>
  </div> -->

  <fullScreen></fullScreen>

  <div class="flex xmx_content xwxs:(flex-col) xwsm:(flex-row)" style="pointer-events: none;">


    <div
      class=" flex flex-col right_box xwxs:(w-[100%]) xwsm:(w-[67.7%])  xwmd:(pt-[7vh] w-[67.7%]) xwlg:(pt-[3vh] w-[67.7%]) ">
      <div>
        <img class="ml-[40px] xwxs:(w-[320px] ) xwsm:(w-[120px] )" src="../../assets/logo_B.png" alt="">
      </div>
      <div class="flex-1  flex flex-col  items-center pt-[110px]">
        <div class="logo_name my-[36px] flex justify-center xwxs:(text-[152px]) xwsm:(text-[72px])">
          <!-- {{ userStore.appInfo.createTime || ' 油品状态监测管理平台' }} -->
          {{ appStore.appInfo.createTime || ' 油品状态监测管理平台' }}
        </div>

        <div class="map_box   relative " ref="sceneDiv">
          <img class="xwxs:(h-[800px]) xwsm:(h-[600px])" src="../../assets/mode.png" alt="">
        </div>

      </div>
      <!-- <div class="logo_name my-[36px] flex justify-center">
        油品状态监测管理平台
      </div>
      <div class="map_box w-[76.9%]   relative xwmd:(mt-[200px]) xwlg:(mt-[0px])" ref="sceneDiv">
        <img class="" src="../../assets/mode.png" alt="">

      </div> -->



    </div>
    <div class="flex-1 flex flex-col justify-center items-center "
      style="background-color: #f3f7f7;pointer-events:all;">
      <div class="mx-auto  leading-[54px] mb-[81px]  xwxs:(text-[100px]) xwsm:(text-[46px])" style="font-weight: 500;">
        账号登录</div>

      <div class="w-[67.7%] mx-auto">

        <div class="py-[14px] px-[8px]flex flex-col mb-[42px]  xwxs:( h-[225px] ) xwsm:( h-[125px] )">
          <div class=" xwxs:(text-[100px]) xwsm:(text-[32px])" style="font-weight: 500;">账号</div>
          <div class="pb-[11px] pt-[2px] flex flex-1" style='border-bottom: 2px solid #969C94;'>
            <input @change="changeInput1" v-model="form.userName" placeholder="请输入"
              class="flex-1 mt-auto xwxs:( h-[140px] !text-[80px] min-w-[100%]) xwsm:( h-[40px] !text-[16px])"
              type="text">
            <div class=" xwxs:(w-[146px] h-[146px]) xwsm:(w-[46px] h-[46px])">
              <img class="w-full h-full" src="../../assets/login/eye.png" alt="">
            </div>
          </div>

          <div class="text-red-500 mt-[10px]" :style="{ 'visibility': ruse1 ? 'visible' : 'hidden' }">
            请输入账号
          </div>
        </div>



        <div class=" px-[8px] flex flex-col xwxs:( h-[225px] py-[104px]) xwsm:( h-[125px] py-[14px])">
          <div class="xwxs:(text-[100px]) xwsm:(text-[32px])" style="font-weight: 500;">密码</div>
          <div class="pb-[11px] pt-[2px] flex flex-1" style='border-bottom: 2px solid #969C94;'>
            <input @change="changeInput2" :type="eyeType ? 'text' : 'password'" v-model="form.passWord"
              placeholder="请输入"
              class="flex-1  mt-auto  xwxs:( h-[140px] !text-[80px] min-w-[100%]) xwsm:( h-[40px] !text-[16px])">
            <div class="xwxs:(w-[146px] h-[146px]) xwsm:(w-[46px] h-[46px])">
              <img @click="eyeType = false" v-if="eyeType" class="w-full h-full" src="../../assets/login/ren1.png"
                alt="">
              <img @click="eyeType = true" v-else class="w-full h-full" src="../../assets/login/ren.png" alt="">
            </div>
          </div>

          <div class="text-red-500 mt-[10px]" :style="{ 'visibility': ruse2 ? 'visible' : 'hidden' }">
            请输入密码
          </div>
        </div>

        <div
          class=" px-[8px] flex flex-col mt-[102px] xwxs:( h-[225px] py-[104px] flex ) xwsm:( h-[125px] py-[14px] hidden)">
          <div class="xwxs:(text-[100px]) xwsm:(text-[32px])" style="font-weight: 500;">IP</div>
          <div class="pb-[11px] pt-[2px] flex flex-1" style='border-bottom: 2px solid #969C94;'>
            <input @blur="changeInput3" v-model="form.wifiIP" placeholder="请输入IP"
              class="flex-1  mt-auto  xwxs:( h-[140px] !text-[80px] min-w-[100%]) xwsm:( h-[40px] !text-[16px])">
          </div>

        </div>




        <div class="flex justify-between xwxs:(  mt-[328px]) xwsm:( mt-[28px])">
          <div class="flex items-center">
            <img class=" cursor-pointer xwxs:(w-[68px] h-[68px]) xwsm:( w-[28px] h-[28px])" @click="changeIsL(false)"
              v-if="form.isLine" src="../../assets/login/true.png" alt="">
            <img class=" xwxs:(w-[68px] h-[68px]) xwsm:( w-[28px] h-[28px]) cursor-pointer" @click="changeIsL(true)"
              v-else src="../../assets/login/kong.png" alt="">
            <span class="ml-[10px]  xwxs:( text-[50px]) xwsm:( text-[20px])">
              离线登录
            </span>
          </div>

          <div class="flex items-center">
            <img class="xwxs:(w-[68px] h-[68px]) xwsm:( w-[28px] h-[28px]) cursor-pointer" @click="changeIsPW(false)"
              v-if="form.isPassWord" src="../../assets/login/true.png" alt="">
            <img class="xwxs:(w-[68px] h-[68px]) xwsm:( w-[28px] h-[28px]) cursor-pointer" @click="changeIsPW(true)"
              v-else src="../../assets/login/kong.png" alt="">
            <span class="ml-[10px] xwxs:( text-[50px]) xwsm:( text-[20px])">
              记住密码
            </span>
          </div>

        </div>





      </div>



      <div
        class="mt-[161px] rounded-[18px]  btn flex justify-center items-center cursor-pointer xwxs:(w-[1028px] h-[205px] text-[80px]) xwsm:(w-[528px] h-[65px] text-[30px])"
        style="background: #00AB63;" @click="tapLogin">
        登录
      </div>


    </div>
  </div>
</template>

<style scoped>
.right_box {
  background: linear-gradient(170deg, #0C8C54 0%, #23965F 40%, #2D8B7C 72%, #197883 100%);
  box-shadow: 31px 54px 143px 0px #BACCD6;
  border-radius: 0px 0px 0px 0px;
}

input {
  border: none;
  background-color: #f3f7f7;
  font-size: 20px;
}

input:focus {
  outline: none;
}

input::placeholder {
  font-size: 20px;
  color: #909090;

}

.btn {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 0px;
  letter-spacing: 12px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.logo_name {
  font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 69px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>
